<template>
	<view class="px-3 pt-3">
		<view class="d-flex pb-3">
			<view class="search-wrap">
				<text style="color: #999999;" class="iconfont icon-search"></text>
			</view>
			<input class="custom-input" @input="searchForTitle" v-model="searchDate" placeholder="请输入搜索内容" type="text" />
		</view>
		<view style="padding: 5px 0;" v-if="searchList.length == 0" v-for="(item,index) in hotnew" :key='index' @tap="Todetail(item)">
			<text class="num" :style="{background:index==0 ? '#df3e3e':index == 1?'#fa7d3c':'#696e78'}">{{index +1}}</text>
			<text class="ellipsis"> {{item.title}} </text>
			<text class="hot">热</text>
		</view>
		<newsSlide v-for="(item,index) in searchList" :key="index" :item="item" :index="index"></newsSlide>

	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	import newsSlide from "@/components/module/news-item.vue"
	export default {
		name: "search",
		data() {
			return {
				searchDate: "",
				searchList: [],
				hotnew: []
			}
		},
		components: {
			newsSlide
		},
		onLoad() {
			api.request({
				url: '/content/top',
				data: {
					page: 1,
				}
			}).then(response => {
				this.hotnew = response
				console.log(response, 'eeeeeee')

			}).catch(err => {
				console.log(err);
			});
		},
		methods: {
			Todetail(item){
				const newsId = item.id;
				const url = item.url;
				const thumb = item.thumb.split('?')[0];
				const title = item.title;
				console.log(url)
				uni.navigateTo({
					url: '/pages/index/news-detail/news-detail?id=' + newsId + "&thumb=" + thumb + "&title=" + title + '&link=' +
						url
				})
			},
			searchForTitle() {
				var _this = this
				api.request({
					url: '/search',
					data: {
						keyword: this.searchDate,
						pageNo: 1,
						pageSize: 10

					}
				}).then(response => {
					_this.searchList = response

				}).catch(err => {
					console.log(err);
				});
			}
		}
	}
</script>

<style scoped>
	.custom-input {
		width: 100%;
		height: 70upx;
		background: #EEEEEE;
	}

	.search-wrap {
		width: 70upx;
		background: #EEEEEE;
		text-align: center;
		padding: 6upx;
	}

	.num {
		display: inline-block;
		width: 32upx;
		height: 32upx;
		border-radius: 50%;
		color: #fff;
		line-height: 32upx;
		text-align: center;
		margin-right: 8px;
	}

	.ellipsis {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		/* padding: 5px; */
		display: inline-block;
		width: 75%;
		vertical-align: bottom;
	}

	.hot {
		display: inline-block;
		background: #ff9508;
		color: #fff;
		width: 36upx;
		height: 36upx;
		border-radius: 8upx;
		font-size: 24upx;
		text-align: center;
		line-height: 32upx;
		margin-left: 80upx;

	}
</style>
